<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { useTheme } from '/@/hooks/index';

  // 定义props
  const props = defineProps<{
    primary?: boolean;
    title?: string;
    elevation?: number;
    /**
     * 是否展示返回按钮
     */
    back?: boolean;
    /**
     * 阻止back按钮的路由返回
     */
    prevent?: boolean;
  }>();
  // 定义外部事件
  const emit = defineEmits(['back']);

  const router = useRouter();

  const onBack = () => {
    if (!props.prevent) {
      router.back();
    }
    emit('back');
  };
</script>

<template>
  <header class="header">
    <div class="header-height"></div>
    <var-app-bar class="app-bar-fixed" title-position="center" safe-area-top :title="title">
      <template #left v-if="back">
        <var-button color="transparent" round text @click="onBack">
          <var-icon name="chevron-left" :size="28" />
        </var-button>
      </template>
      <template #left v-else>
        <slot name="left"></slot>
      </template>
      <template #content>
        <slot name="content"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
      <slot></slot>
    </var-app-bar>
  </header>
</template>

<style lang="scss" scoped>
  $height: var(--app-bar-height);

  .header {
    .header-height {
      height: $height;
    }

    .app-bar-fixed {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      box-shadow: none;
      // 此处设置app-bar层级，可以实现展示最高的效果
      z-index: 99;
      height: $height;
      background: #111111;
      color: rgb(255, 255, 255);
    }
  }
</style>
<style lang="scss">
  //导航栏文字加粗
  .app-bar-fixed {
    .var-app-bar__title {
      font-size: 46px;
    }
  }
</style>
